<%@ page contentType="text/html; charset=UTF-8" language="java"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<!doctype html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>广告管理 </title>
		<%@ include file="/WEB-INF/jspf/taglibs.jspf"%>
		<%@ include file="/WEB-INF/jspf/statics.jspf"%>
</head>
<body>
<div id="wrapper">

    <div class="submit-form pusht">
        <form name="submit-form" id="submit-form" enctype="multipart/form-data">
            <table class="form label-colored-form">
                <c:if test="${operationType=='add'}">
                    <tbody>
                    <tr class="sprite">
                        <td class="label-td"><label>广告类型：</label></td>
                        <td>
                            <select name="advertiseType" id="advertiseType" >
                            	<c:forEach items="${advertiseType}" var="type">
                                	<option value=${type.id }>${type.advertiseType}</option>
                                </c:forEach>
                            </select>
                        </td>
                    </tr>
                    <tr class="sprite">
                        <td class="label-td"><label>广告标题：</label></td>
                        <td><input type="text" name="title" id="title" value="" maxlength="20" style="width:200px;"><span style="color:red;"></span></td>
                    </tr>
                    <tr class="sprite">
                        <td class="label-td"><label>广告描述：</label></td>
                        <td><textarea name="advertiseDescription" id="advertiseDescription" style="width:382px;height:50px;resize:none; "></textarea><span style="color:red;"></span></td>
                    </tr>
                    <tr class="sprite">
                        <td class="label-td"><label>广告图片：</label></td>
                        <td>
                       		<div style="width:155px;height: 180px;float:left;padding-right:5px;">
                       			<div id="localImagfile"><img style="width:155px;height: 155px;margin-right:5px;" src="C:\1.png" id="previewfile"/></div>
                        		<input type="file" name="file" id="file" style="width:155px;" onchange="return fileshow('file')"/>
                       		</div>
                       		<div style="width:155px;height: 180px;float:left;padding-right:5px;">
                       			<div id="localImagfile2"><img style="width:155px;height: 155px;margin-right:5px;" src="C:\1.png" id="previewfile2"/></div>
	                        	<input type="file" name="file2" id="file2" style="width:155px;" onchange="return fileshow('file2')"/>
                        	</div>
   	                    	<div style="width:155px;height: 180px;float:left;">
   	                    		<div id="localImagfile3"><img style="width:155px;height: 155px;margin-right:5px;" src="C:\1.png" id="previewfile3"/></div>
   	                    		<input type="file" name="file3" id="file3" style="width:155px;" onchange="return fileshow('file3')" />
   	                    	</div>
                        </td>
                    </tr>
                   
                   <tr class="sprite">
                        <td class="label-td"><label>是否启用：</label></td>
                        <td>
                            <select name="status" id="status">
                                <option value=1>启用</option>
                                <option value=2>禁用</option>
                            </select>
                        </td>
                    </tr>
                    <tr class="sprite">
                        <td class="label-td"><label></label></td>
                        <td>
                            <button class="btn btn-primary" id="btn_confirm">添加</button>
                        </td>
                    </tr>
                    </tbody>
                </c:if>
                
                
                <c:if test="${operationType !='add'}">
                    <input type="hidden" name="id" value="${advertise.id}"/>
                    <tbody>
                    <tr class="sprite">
                        <td class="label-td"><label>广告类型：</label></td>
                        <td>
                            <select name="advertiseType" id="advertiseType" >
                            	<c:forEach items="${advertiseType}" var="type">
                                	<option value="${type.id }"  <c:if test="${advertise.advertiseType == type.id}">selected</c:if>>${type.advertiseType}</option>
                                </c:forEach>
                            </select>
                        </td>
                    </tr>
                    <tr class="sprite">
                        <td class="label-td"><label>广告标题：</label></td>
                        <td><input type="text" name="title" id="title" value="${advertise.title }" maxlength="20" style="width:200px;"><span style="color:red;"></span></td>
                    </tr>
                    <tr class="sprite">
                        <td class="label-td"><label>广告描述：</label></td>
                        <td><textarea name="advertiseDescription" id="advertiseDescription" style="width:382px;height:50px;resize:none; ">${advertise.advertiseDescription }</textarea><span style="color:red;"></span></td>
                    </tr>
                    <tr class="sprite">
                        <td class="label-td"><label>广告图片：</label></td>
                        <td>
                        	<c:if test="${advertise.imagePath !=null}">
                        		<div style="width:155px;height: 180px;float:left;padding-right:5px;">
	                        		<div id="localImagfile"><img style="width:155px;height: 155px;margin-right:5px;" src="<%=basePath%>/${advertise.imagePath}" id="previewfile"/></div>
	                        		<input type="file" name="file" id="file" style="width:155px;" onchange="return fileshow('file')" />
                        		</div>
                        	</c:if>
	                        <c:if test="${advertise.imagePath2 !=null}">
	                        	<div style="width:155px;height: 180px;float:left;padding-right:5px;">
		                        	<div id="localImagfile2"><img style="width:155px;height: 155px;margin-right:5px;" src="<%=basePath%>/${advertise.imagePath2}" id="previewfile2"/></div>
		                        	<input type="file" name="file2" id="file2" style="width:155px;"  onchange="return fileshow('file2')"/>
	                        	</div>
	                        </c:if>
    	                    <c:if test="${advertise.imagePath3 !=null}">
    	                    	<div style="width:155px;height: 180px;float:left;">
    	                    		<div id="localImagfile3"><img style="width:155px;height: 155px;" src="<%=basePath%>/${advertise.imagePath3}" id="previewfile3" /></div>
    	                    		<input type="file" name="file3" id="file3" style="width:155px;" onchange="return fileshow('file3')" />
    	                    	</div>
    	                    </c:if>
    	                    
                        </td>
                    </tr>
                   
                   <tr class="sprite">
                        <td class="label-td"><label>是否启用：</label></td>
                        <td>
                            <select name="status" id="status">
                                <option value=1 <c:if test="${advertise.status==1}">selected</c:if> >启用</option>
                                <option value=2 <c:if test="${advertise.status!=1}">selected</c:if>>禁用</option>
                            </select>
                        </td>
                    </tr>
                    <tr class="sprite">
                        <td class="label-td"><label></label></td>
                        <td>
                            <button class="btn btn-primary" id="btn_confirm1">保存</button>
                        </td>
                    </tr>
                    </tbody>
                </c:if>
            </table>
        </form>
    </div>
</div>
</body>
</html>
<script type="text/javascript" src="<%=basePath%>/js/jquery.form.js"></script>
<script type="text/javascript">
  $(document).ready(function () {
      // 给确认按钮绑定点击事件
      $("#btn_confirm").click(function (e) {
          e.preventDefault();
          if(subimtBtn('add')){
          	dialog_close();
          }
      });

      $("#btn_confirm1").click(function (e) {
          e.preventDefault();
          if(subimtBtn('update')){
          	dialog_close();
          }
      });
      $("#title").focus(function(){
    	  $("#title").next().text('');
      });
      $("#advertiseDescription").focus(function(){
    	  $("#advertiseDescription").next().text('');
      })
  });
  
   function fileshow(name){
	  //$("#"+name).src=$("input[name="+name+"]").value;
  } 

  function checkForm(){
	  values = $("#submit-form").serializeArray();  
	  
	  var values, index;  
	  var result=true;
	  
	     for (index = 0; index < values.length; ++index)  
	    {  
	      if (values[index].name == "title")  
	      {  
	    	  if(values[index].value=="" || values[index].value==null){
	    		  result=false;
	    		  $("#title").next().text("标题不能为空!");
	    		  break;
	    	  }    	  
	      }  
	      if (values[index].name == "advertiseDescription")  
	      {  
	    	  if(values[index].value=="" || values[index].value==null){
	    		  result=false;
	    		  $("#advertiseDescription").next().text("广告描述不能为空!");
	    		  break;
	    	  }  
	      }
	    }  
	     return result;
  }
  
  function CheckFile(obj) {  
	    var array = new Array('gif', 'jpeg', 'png', 'jpg');  //可以上传的文件类型  
	    if (obj.value == '') {  
	        alert("让选择要上传的图片!");  
	        return false;  
	    }  
	    else {  
	        var fileContentType = obj.value.match(/^(.*)(\.)(.{1,8})$/)[3]; //这个文件类型正则很有用：）  
	        var isExists = false;  
	        for (var i in array) {  
	            if (fileContentType.toLowerCase() == array[i].toLowerCase()) {  
	                isExists = true;  
	                return true;  
	            }  
	        }  
	        if (isExists == false) {  
	            obj.value = null;  
	            alert("请选择图片类型文件！");  
	            return false;  
	        }  
	        return false;  
	    }  
	}  
  
  
  function subimtBtn(type) {  
	  if(!checkForm()){
		  return false;
	  }
      var form = $("#submit-form");  
      var options  = {    
          url:'${ctx}/equipment/update_advertise/'+type,    
          type:'post',    
          success:function(json)    
          {    
          	if (json == "success") {
              	parent.document.getElementById('success').click();
              } else {
              	parent.document.getElementById('fail').click();
              }
          }    
      };    
      form.ajaxSubmit(options);  
      dialog_close({callBack: function () {
          parent.document.getElementById('btn-primary').click();
      }});
  }  

function fileshow(id) {
	 
	  var docObj=document.getElementById(id);
	  CheckFile(docObj);
	  var imgObjPreview=document.getElementById("preview"+id);
	  if(docObj.files &&docObj.files[0]){
		  //火狐下，直接设img属性
		  imgObjPreview.style.display = 'block';
		  imgObjPreview.style.width = '155px';
		  imgObjPreview.style.height = '155px'; 
		  //imgObjPreview.src = docObj.files[0].getAsDataURL();
		   
		  //火狐7以上版本不能用上面的getAsDataURL()方式获取，需要一下方式
		  imgObjPreview.src = window.URL.createObjectURL(docObj.files[0]);
	  }else{
		  //IE下，使用滤镜
		  docObj.select();
		  var imgSrc = document.selection.createRange().text;
		  var localImagId = document.getElementById("localImag"+id);
		  //必须设置初始大小
		  localImagId.style.width = "155px";
		  localImagId.style.height = "155px";
		  //图片异常的捕捉，防止用户修改后缀来伪造图片
		  try{
			  localImagId.style.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";
			  localImagId.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = imgSrc;
		  }catch(e){
			  alert("您上传的图片格式不正确，请重新选择!");
			  return false;
		  }
		  imgObjPreview.style.display = 'none';
		  document.selection.empty();
	  }
	  return true;
  }
</script>